<template>
  <div class="p-5">
    <!-- 关于我hexo页 -->
    <div
      class="flex justify-between h-[21rem] border-b border-[--border-color]"
    >
      <!-- 打字机 -->
      <div class="flex flex-col gap-4">
        <Typewriter
          :texts="aboutTexts"
          :speed="150"
          :pauseBetweenTexts="2500"
        />
        <p class="text-md">学无止境，保持学习100年。</p>
      </div>
      <!-- 侧边栏 -->
      <Sidebar class="hidden md:block h-[20rem]" />
    </div>

    <!-- 我的项目 -->
    <div class="mt-4">
      <div class="text-2xl font-bold mb-6">我的项目</div>
      <div class="grid items-center grid-cols-1 lg:grid-cols-2 gap-6">
        <Card
          v-for="item in programList"
          :key="item.title"
          :title="item.title"
          :description="item.description"
          :image="item.image"
          :link="item.link"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import Typewriter from "@/views/frontend/Home/components/Typewriter.vue";
import Sidebar from "@/views/frontend/Home/components/Sidebar.vue";
import Card from "./components/Card.vue";

// 关于我的介绍文本数组
const aboutTexts = [
  "您好，我是一名前端开发程序员。",
  "您好，我是一名游戏爱好者，怎么也玩不腻！",
];

const programList = [
  {
    title: "VideoCut - Web端视频编辑工具",
    description:
      "VideoCut是一款基于WebCodecs技术实现的Web端视频编辑工具，低配版剪映Web版。该项目目录架构和大部分功能实现来自于CcClip-master开源项目，音视频处理使用@webav/av-cliper开源库。",
    link: "https://gitee.com/zhu-liang/web-video-editor",
  },
  {
    title: "个人博客项目",
    description:
      "本项目由Vite + Vue3 + VueRouter + TailwindCSS + md-editor-v3;写的个人博客，实现了博客前台文章阅览，文章分类，图库，文章全局搜索等，配套开发了后台管理。支持PC/移动端响应式布局。",
    link: "https://gitee.com/zhu-liang/shenxiu-blog-ui",
  },
  {
    title: "高仿网易云音乐项目",
    description:
      "本项目由Vite + Vue3 + VueRouter + TailwindCSS + ElementPlus写的高仿网易云音乐，实现了网易云音乐的主要功能。",
    link: "https://gitee.com/zhu-liang/shenxiu-music-ui",
  },
  {
    title: "宝可梦信息管理系统",
    description:
      "本项目前端使用vite+vue3+pinia+ts+element-plus，后端使用egg.js + mysql，实现了宝可梦信息管理和用户权限管理。",
    link: "https://gitee.com/zhu-liang/pokenman-management-system",
  },
];
</script>
